	<template>
	  <div class="amap-wrapper">
	      <el-amap
	        vid="amapDemo1"
	        :center="center"
	        :zoom="zoom"
	        class="amap-demo">

	        <el-amap-marker
	        	:key="i"
	        	v-for="(marker,i) in markers" :position="marker.position" :template="marker.template"></el-amap-marker>

	      </el-amap>


	      <!--<van-button round type="info" class="van_buttom">列表模式</van-button>-->

	     <div class="city_left_img">
	     	<div @click="citylift">
	     		<img src="../../assets/cityleft.png" style="width: 7vh;height: 7vh;" />
	     	</div>


	     	<div @click="cityright">
	     		<img src="../../assets/cityright.png"  style="width: 24vw;"/>
	     	</div>
	     </div>


	      <div class="footer_item_content">
	      	<div class="footer_item_page_one">
	      		 <p class="zhu">{{equ.device_name}}</p>
	      		 <p class="address">
	      		 	<van-icon name="location-o" />
	      		 	<span>{{equ.distance}}KM</span>
	      		 	<span>|</span>
	      		 	<span>{{equ.address}}</span>
	      		 </p>
	      	</div>
	      </div>

	      <div class="footer_two_content">

	      		<div  v-for="(inner, i) in equ.inner_list"
                  :key="i">
	      			<img :src="inner.img_src" />
	      			<p><span>{{inner.inner_type_name}}</span></p>
	      			<p><span style="font-size:10px;">{{inner.integral}}积分/{{inner.unit}}</span></p>
	      		</div>




	      	</div>
	  </div>

 </template>
<script>
export default {
  data () {
    return {
        equ:'',
        zoom: 12,

        center: [116.6730297850, 39.9126503144],
        markers: [],
        markerRefs: [],
        source: 'click',
        msg: 'vue-amap向你问好！',
        Imgsrc:require('../../assets/box.png')
    }
  },

    mounted() {
        this.equ = JSON.parse(this.$route.query.equ);
        this.center=[this.equ.lon,this.equ.lat]
        let self = this;
        let markers = [];
        let index = 0;

        let num = 1;

        for (let i = 0 ; i < num ; i++) {
          markers.push({
            position: [this.equ.lon, this.equ.lat + i * 0.03],
            template: `<img src="http://yfpics.esencloud.com.cn/pictures/box.png" style="width:23px;height:30px">`
          });
        }
        this.markers = markers;
      },
       methods: {
       	citylift(){
            this.$router.push({
                path:'/banner'
            })
       	},
       	cityright(){
       		this.$router.push({
       			path:'/cityrightlist',
              query:{equ:JSON.stringify(this.equ)}
       		})
       	},
        handler(index) {
         // alert(`${ index } - trigger`);
        }
      }
}
</script>

<style scoped="scoped">
	.van_buttom{
		position: absolute;
	    top: 4vh;
	    right: 3vw;
	}

.amap-wrapper {
  width: 100%;
  height: 74vh;
}
.amap-wrapper >>> .van-button--info{
	background: #FFFFFF;
	border:#FFFFFF
}
.amap-wrapper >>>.van-button--normal{
	color: #000000;
	font-weight: bold;
}
.footer_item_content{
	text-align: left;
	border-bottom: 1px solid #F6F6F6;
	padding: 3vw;
}
.footer_item_page_one .zhu{

	font-size: 14px;
	color: #000000;
	font-weight: 700;
}


.footer_item_content p{
	margin: 0;
	padding: 0;
}
.footer_item_page_one .address{
	color: #999999;
	margin-top: 0.5vh;
	font-size: 12px;
}
.footer_two_content{
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding-top: 1vh;

}
.city_left_img{
	width: 97%;
	position: absolute;
	top:3vh;
	display: flex;
	padding: 1vh;
	justify-content: space-between;
}

/*.city_left_img div{

}*/

p{
	margin: 0;
	padding: 0;
}
.footer_two_content div{
	flex: 1;
	font-size: 12px;
	text-align: center;
}
.footer_two_content img{
	width: 8vw;
}
</style>
